<template>
    <div id="online-learning">
        <el-dialog
            title="培训资料"
            v-model="isUseDialog" 
            draggable 
            :close-on-click-modal="false" 
            width="60%"
            :before-close="handleClose"
            :destroy-on-close="true"
        >
            <el-table
                class="heightcss"
                :data="fileData" 
                style="width: 100%"
                v-loading="loading"
                element-loading-background="rgba(0, 0, 0, 0.5)"
                border
            >
                <el-table-column
                    prop="fileOriginName"
                    label="附件名称"
                    min-width="120"
                    align="center"
                    :show-overflow-tooltip="true"
                />
                <el-table-column
                    prop="fileSuffix"
                    label="文件格式"
                    min-width="120"
                    align="center"
                    :show-overflow-tooltip="true"
                />
                <el-table-column
                    prop="fileSizeKb"
                    label="文件大小"
                    min-width="100"
                    align="center"
                    :show-overflow-tooltip="true"
                />
                <el-table-column
                    prop="filePath"
                    label="文件路径"
                    min-width="140"
                    align="center"
                    :show-overflow-tooltip="true"
                />
                <el-table-column
                    fixed="right"
                    prop="operation"
                    label="操作"
                    show-overflow-tooltip
                    min-width="140"
                    align="center"
                >
                    <template #default="scope">
                        <el-button @click="learnClick(scope.row)" class="icon-e" text type="warning">开始学习</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <template #footer>
                <el-button @click="cancelUseClick">关 闭</el-button>
            </template>
        </el-dialog>
        <LearnModel
            :modelDialog="modelDialog"
            :learnInfo="learnInfo"
            @cancelModelClick="cancelModelClick"
        />
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive , computed , toRef , toRefs , toRaw , onMounted , watch } from 'vue'
import { ElButton, ElDialog } from 'element-plus';
import LearnModel from './learn-model.vue';
import { sysFileInfoPage } from '/@/api/centerControl/pubilc';
export default defineComponent( {
    name: 'online-learning',
    components: {
        LearnModel,
    },
    props: {
        isUseDialog:{
            type: Boolean,
            default: false,
        },
        fileInfo: {
            type: String,
            default: ''
        }
    },
    setup(props,ctx){
        const loading = ref(false);
        const fileData = ref();
        const modelDialog = ref(false);
        const learnInfo = ref();

        /*** handleClose 关闭按钮点击事件 */
        const handleClose = () => {
            cancelUseClick();
        }

        /*** cancelUseClick 取消事件 */
        const cancelUseClick = () => {
            if(JSON.parse(props.fileInfo).MyStudy) ctx.emit('updateData');
            fileData.value = [];
            ctx.emit('cancelLearnClick');
        }

        /*** 监听isUseDialog的变化 */
        watch(() => props.isUseDialog,(newVal) => {
            if(newVal){
                getPageFile(JSON.parse(props.fileInfo).id);
            }
        })

        /*** learnClick 在线学习点击事件 */
        const learnClick = (val: any) => {
            let param = {
                l_TrainingPlanId: JSON.parse(props.fileInfo).id,
                learnRecord: JSON.stringify(val),
            }
            learnInfo.value = JSON.stringify(param);
            modelDialog.value = true;
        }

        /*** cancelModelClick 退出学习点击事件 */
        const cancelModelClick = () => {
            modelDialog.value = false;
        }

        /*** getPageFile 获取分页文件接口数据 */
        const getPageFile = async(id: Number) => {
            let param: any = {}
            param.PageNo = 1;
            param.PageSize = 99999;
            param.sourceId = id;
            let res: any = await sysFileInfoPage(param);
            if(res.success && res.data.rows.length !== 0){
                console.log(res.data.rows,'rows');
                loading.value = true;
                fileData.value = res.data.rows;
                loading.value = false;
            }
        }

        /*** isUseDialog 响应弹窗的关闭  */
        const isUseDialog = computed(() => {
            return props.isUseDialog
        })

        return {
            handleClose,
            cancelUseClick,
            isUseDialog,
            learnClick,
            loading,
            fileData,
            cancelModelClick,
            modelDialog,
            learnInfo,
        }
    },
} )
</script>
<style scoped lang="scss">
</style>